<template>
    <div class="box emp-sign-stats">
      <div class="header">
        <div class="title">签到排行榜</div>
        <div class="date">{{ currentDate }}</div>
      </div>
      <div class="content">
        <!-- 左侧排行榜 -->
        <div class="rank-container">
          <div class="rank-list">
            <div v-for="(item, index) in rankList" 
                 :key="item.userId" 
                 class="rank-item"
                 :class="getRankClass(index)">
              <div class="rank-num">{{ index + 1 }}</div>
              <div class="user-info">
                <div class="user-name">{{ item.userName }}</div>
                <div class="sign-info">
                  <span>本月签到: {{ item.signCount }}天</span>
                  <span>最高连续签到: {{ item.consecutiveCount }}天</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 右侧签到模块 -->
        <div class="sign-container">
          <div class="sign-stats">
            <div class="stat-card" :class="{ 'full-attendance': signStats.count >= 22 }">
              <div class="stat-content">
                <div class="stat-value">{{ signStats.count }}</div>
                <div class="stat-label">本月签到</div>
              </div>
              <div class="stat-icon">
                <el-icon><Star /></el-icon>
              </div>
              <div v-if="signStats.count >= 22" class="full-attendance-badge">
                <el-icon><Trophy /></el-icon>
                <span>全勤</span>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-content">
                <div class="stat-value">{{ signStats.consecutiveCount }}</div>
                <div class="stat-label">最高连续签到</div>
              </div>
              <div class="stat-icon">
                <el-icon><Timer /></el-icon>
              </div>
            </div>
          </div>
  
          <div class="sign-button-container">
            <el-button 
              :type="hasSignedToday ? 'success' : 'primary'"
              :disabled="hasSignedToday"
              @click="handleSign"
              size="large"
              class="sign-button"
            >
              {{ hasSignedToday ? '已签到' : '签到' }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { sign, signCount, getSignStatus, getSignRank } from '@/api/manage/emp'
  import { getInfo } from '@/api/login'
  import dayjs from 'dayjs'
  import { ElMessage } from 'element-plus'
  
  const currentDate = ref(dayjs().format('YYYY年MM月DD日'))
  const hasSignedToday = ref(false)
  const signStats = ref({
    count: 0,
    consecutiveCount: 0
  })
  const userId = ref(null)
  const rankList = ref([])
  
  // 获取排行榜数据
  const loadRankList = async () => {
    try {
      const res = await getSignRank()
      if (res.code === 200) {
        rankList.value = res.data
      }
    } catch (error) {
      console.error('获取排行榜失败:', error)
    }
  }
  
  // 获取排名样式类
  const getRankClass = (index) => {
    switch(index) {
      case 0: return 'rank-gold'
      case 1: return 'rank-silver'
      case 2: return 'rank-bronze'
      default: return ''
    }
  }
  
  // 初始化数据
  const initData = async () => {
    try {
      const userInfo = await getInfo()
      if (userInfo && userInfo.user && userInfo.user.userId) {
        userId.value = userInfo.user.userId
        await checkSignStatus()
        await getSignStats()
        await loadRankList()
      }
    } catch (error) {
      console.error('初始化数据失败:', error)
    }
  }
  
  // 检查今日签到状态
  const checkSignStatus = async () => {
    if (!userId.value) return
    try {
      const res = await getSignStatus(userId.value)
      hasSignedToday.value = res === 1
    } catch (error) {
      console.error('获取签到状态失败:', error)
      hasSignedToday.value = false
    }
  }
  
  // 获取签到统计
  const getSignStats = async () => {
    if (!userId.value) return
    try {
      const res = await signCount(userId.value)
      if (res.code === 200 && res.data) {
        signStats.value = {
          count: res.data.count || 0,
          consecutiveCount: res.data.consecutiveCount || 0
        }
      }
    } catch (error) {
      console.error('获取签到统计失败:', error)
    }
  }
  
  // 处理签到
  const handleSign = async () => {
    if (!userId.value) {
      ElMessage.warning('请先登录')
      return
    }
    
    if (hasSignedToday.value) {
      ElMessage.warning('今日已签到')
      return
    }
    
    try {
      const res = await sign(userId.value)
      if (res.code === 200) {
        hasSignedToday.value = true
        await getSignStats()
        await loadRankList()
        ElMessage.success('签到成功')
      } else {
        ElMessage.error(res.msg || '签到失败')
      }
    } catch (error) {
      console.error('签到失败:', error)
      ElMessage.error('签到失败，请稍后重试')
    }
  }
  
  onMounted(() => {
    initData()
  })
  </script>
  
  <style lang="scss" scoped>
  .emp-sign-stats {
    display: flex;
    flex-direction: column;
    height: calc((100vh - 120px) * 0.4 - 20px);
    min-height: 352px;
    margin-top: 20px;
    background: #FFFFFF;
    border-radius: 20px;
  
    .header {
      padding: 20px 20px 0;
      display: flex;
      align-items: center;
      gap: 20px;
  
      .title {
        font-size: 16px;
        font-weight: bold;
      }
  
      .date {
        font-size: 16px;
        font-weight: bold;
      }
    }
  
    .content {
      flex: 1;
      display: flex;
      padding: 20px;
      gap: 20px;
      min-height: 0;
    }
  
    .rank-container {
      width: 450px;
      border-right: 1px solid #eee;
      overflow-y: auto;
      padding-right: 20px;
  
      .rank-list {
        .rank-item {
          display: flex;
          align-items: center;
          padding: 12px 16px;
          margin-bottom: 8px;
          background: #f8f9fa;
          border-radius: 8px;
          transition: all 0.3s;
  
          &:hover {
            transform: translateX(5px);
          }
  
          &.rank-gold {
            background: linear-gradient(145deg, #ffe000, #ffc500);
            color: white;
            font-size: 16px;
            .rank-num { background: rgba(255,255,255,0.3); color: white; font-size: 16px;}
            .sign-info { color: rgba(255,255,255,0.8); }
          }
  
          &.rank-silver {
            background: linear-gradient(145deg, #C0C0C0, #A9A9A9);
            color: white;
            font-size: 16px;
            .rank-num { background: rgba(255,255,255,0.3); color: white; font-size: 16px;}
            .sign-info { color: rgba(255,255,255,0.8); }
          }
  
          &.rank-bronze {
            background: linear-gradient(145deg, #CD7F32, #B87333);
            color: white;
            font-size: 16px;
            .rank-num { background: rgba(255,255,255,0.3); color: white; font-size: 16px;}
            .sign-info { color: rgba(255,255,255,0.8); }
          }
  
          .rank-num {
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background: #e4e7ed;
            border-radius: 50%;
            margin-right: 12px;
            font-weight: bold;
            font-size: 14px;
          }
  
          .user-info {
            flex: 1;
  
            .user-name {
              font-weight: bold;
              margin-bottom: 4px;
            }
  
            .sign-info {
              font-size: 12px;
              color: #666;
              
              span {
                margin-right: 12px;
              }
            }
          }
        }
      }
    }
  
    .sign-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 300px;
      
      .sign-stats {
        display: flex;
        gap: 20px;
        margin-bottom: 40px;
        
        .stat-card {
          position: relative;
          width: 180px;
          height: 100px;
          background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
          border-radius: 15px;
          padding: 20px;
          transition: all 0.3s ease;
          cursor: pointer;
          overflow: hidden;
          
          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            
            .stat-icon {
              transform: scale(1.2);
            }
          }
          
          &.full-attendance {
            background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
            
            .stat-content {
              color: white;
            }
            
            .full-attendance-badge {
              position: absolute;
              top: 10px;
              right: 10px;
              background: rgba(255,255,255,0.9);
              padding: 5px 10px;
              border-radius: 20px;
              display: flex;
              align-items: center;
              gap: 5px;
              font-size: 12px;
              color: #ffa500;
              
              i {
                font-size: 14px;
              }
            }
          }
          
          .stat-content {
            position: relative;
            z-index: 1;
            
            .stat-value {
              font-size: 36px;
              font-weight: bold;
              color: #333;
              margin-bottom: 5px;
            }
            
            .stat-label {
              font-size: 14px;
              color: #666;
            }
          }
          
          .stat-icon {
            position: absolute;
            right: 20px;
            bottom: 20px;
            font-size: 40px;
            opacity: 0.2;
            transition: all 0.3s ease;
          }
        }
      }
  
      .sign-button-container {
        .sign-button {
          width: 120px;
          height: 120px;
          border-radius: 50%;
          font-size: 20px;
          transition: all 0.3s ease;
          
          &:not(:disabled):hover {
            transform: scale(1.1);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
          }
          
          &:disabled {
            opacity: 0.8;
          }
        }
      }
    }
  }
  </style>